
<template>
  <el-row>
    <el-col :span="12" class="sea-card">
      <sea-request url="/sys/dept/list" :result-parser="resultParser">
        <el-card shadow="hover" slot-scope="{response, reload, loading}">
            <sea-table-title slot="header" title="部门列表">
              <sea-tips>
                <p>分组决定了用户的上下级关系；</p>
                <p>业务中，通常决定了数据的查询范围。</p>
                <p>部门是特殊的用户组，决定了用户的上下级关系；</p>
              </sea-tips>
              <el-button type="text" @click="reload" class="pull-right"><i class="fa fa-refresh"></i> 刷新</el-button>
            </sea-table-title>
            <sea-skeleton :data="response" :loading="loading">
              <sea-editable-tree
                  :options="response"
                  :click="onClick"
                  :create="onCreate"
                  :remove="onRemove"
                  :modify="onModify">
              </sea-editable-tree>
            </sea-skeleton>
        </el-card>
      </sea-request>
    </el-col>
    <el-col :span="12" class="sea-card">
      <el-card shadow="hover">
        <sea-table-title slot="header" title="编辑分组" subtitle="选中左侧分组之后进行编辑"></sea-table-title>
        <sea-table-title slot="header" title="编辑部门" subtitle="选中左侧部门之后进行编辑"></sea-table-title>

        <smart-form ref="form_modify" method="POST" url="/sys/dept/info"
                    :model="form_data" :on-succeed="onSucceed">
          <smart-form-layout require name="roleId" label="角色">
            <smart-select name="roleId" placeholder="角色" :options="roles"></smart-select>
          </smart-form-layout>
          <smart-form-layout require name="name" label="名称">
            <smart-text-view name="name" placeholder="分组名称"></smart-text-view>
            <smart-text-view name="name" placeholder="部门名称"></smart-text-view>
          </smart-form-layout>
          <smart-form-layout require name="code" label="编码">
            <smart-text-view name="code" placeholder="分组编码"></smart-text-view>
            <smart-text-view name="code" placeholder="部门编码"></smart-text-view>
          </smart-form-layout>
          <smart-form-layout require name="icon" label="图标">
            <smart-text-view name="icon" placeholder="图标"></smart-text-view>
          </smart-form-layout>
          <smart-form-layout require name="description" label="描述">
            <smart-text-view type="textarea" name="description" placeholder="分组描述"></smart-text-view>
            <smart-text-view type="textarea" name="description" placeholder="部门描述"></smart-text-view>
          </smart-form-layout>
        </smart-form>

      </el-card>
    </el-col>
  </el-row>
</template>

<script>

import Bamboo from "@/lang/bamboo";

export default {
    components: {},
    data() {
        return {
            // 当前操作的数据
            row_data: undefined,
            // role
            roles: undefined,
            // form-data start 表单数据对象模型
            form_data: [
                {
                    name: 'id', label: 'ID', value: ''
                    , rules: [
                        {required: true, message: '[ID]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'path', label: '层级路径', value: ''
                    , rules: [
                        {required: true, message: '[层级路径]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'pid', label: '父级ID', value: ''
                    , rules: [
                        {required: true, message: '[父级ID]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'level', label: '层级', value: ''
                },
                {
                    name: 'roleId', label: '角色ID', value: ''
                    , rules: [
                        {required: true, message: '[角色ID]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'orgId', label: '机构ID', value: ''
                    , rules: [
                        {required: true, message: '[机构ID]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'deptName', label: '分组名称', value: ''
                    , rules: [
                        {required: true, message: '[分组名称]字段不允许为空 ', trigger: 'blur'},
                        {required: true, message: '[部门名称]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 64, message: '最多64字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'deptCode', label: '部门码', value: ''
                    , rules: [
                        {required: true, message: '[部门码]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'icon', label: '图标', value: ''
                    , rules: [
                        {required: true, message: '[图标]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'description', label: '描述', value: ''
                    , rules: [
                        {required: true, message: '[描述]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 128, message: '最多128字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'editable', label: '是否可编辑', value: ''
                },
                {
                    name: 'disabled', label: '是否禁用', value: ''
                },
                {
                    name: 'gmtCreate', label: '创建日期', value: ''
                },
                {
                    name: 'gmtModified', label: '修改日期', value: ''
                },
            ]
            // form-data end
        }
    },
    created() {
        this.$layers.ajax({
            url: '/authority/role/list',
            method: 'GET',
            params: {}
        }).then(ret => {
            if (ret.code === 0) {
                this.roles = this.$layers.wrapDictionary(ret.data, 'roleName', 'id');
            }
        });
    },
    methods: {
        /**
         * 查询结果转换为树形结构
         */
        resultParser: function (list) {
            if (this.$layers.isNotEmpty(list)) {
                this.row_data = list[0];
            }
            let arr = this.$bamboo.wrapList(list, dept_opts);
            return this.$bamboo.toTree(arr);
        },
        /**
         * 新增/编辑操作成功
         *
         * @param ret 后台响应数据
         * @param data 表单数据
         */
        onSucceed: function (ret, data) {
            if (ret.code === 0) {
                this.$layers.succeed('操作成功！');
            }
        },
        /**
         * 新增节点
         * @param node 节点
         * @param data 数据
         * @returns {Promise<*>}
         */
        onCreate: async function (data, node) {
            return new Promise(resolve => {
                this.$layers.ajax({
                    url: '/sys/dept/info',
                    method: 'POST',
                    params: {pid: data.id}
                }).then(ret => {
                    if (ret.code === 0) {
                        let node = this.$bamboo.wrapObject(ret.data, Bamboo.getTitleOption());
                        resolve(node);
                    }
                })
            });
        },
        /**
         * 移除节点
         * @param node 节点
         * @param data 数据
         * @returns {Promise<*>}
         */
        onRemove: async function (data, node) {
            return new Promise(resolve => {
                this.$layers.delete({
                    url: '/sys/dept/info',
                    method: 'DELETE',
                    params: {id: data.id}
                }).then(ret => {
                    if (ret.code === 0) {
                        resolve();
                    }
                })
            });
        },
        /**
         * 点击事件
         * @param node 节点
         * @param data 数据
         * @returns {Promise<*>}
         */
        onClick: function (data, node) {
            this.row_data = data;
            this.$refs.form_modify.val(data.data);
        },
        /**
         * 更新
         * @param node 节点
         * @param data 数据
         * @returns {Promise<*>}
         */
        onModify: function (data, node) {
            this.row_data = data;
        }
    }
};
</script>

